<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监控</title>
    <script src="js/vue-2.6.10.js"></script>

</head>
<body>
<div class="app">
    <input type="text" v-model="shows">
    <hr><br>
    <input type="text" v-model="person.name"><br>
    <input type="text" v-model="person.age"><br>
    <input type="text" v-model="person.height"><br>
    <input type="text" v-model="person.weight"><button @click="person.weight++">加体重</button>
    <h2>
        姓名:{{person.name}}--体重:{{person.weight}}
    </h2>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:".app",
        data:{
           shows:"闫杰",
            //定义一个对象
            person:{"name":"boot",age:25,"height":173,"weight":120,"notLove":true}
        },
        //监控
        watch:{
            shows(newV,oldV){
                console.log("新值:"+newV,"旧值:"+oldV);
            },
            person:{
                //开启深度监控
                deep:true,
                //监控数据变化
                handler(obj){
                    console.log("name = " + obj.name + "; weight=" + obj.weight);
                }
            }


        }
    })
</script>
</body>
</html>